<template>
	<div
		class="flex justify-center items-center py-0.5 bg-orange-100 border-orange-300 border-t xl:border xl:rounded-sm"
		v-if="!isCountDownFinish"
	>
		<m-svg-icon
			name="countdown"
			class="w-1.5 h-1.5 mr-1"
			fillClass="fill-red-600"
		></m-svg-icon>
		<p class="text-sm text-red-600 font-bold">
			限时特惠 | 距离优惠结束仅剩
			<m-count-down
				:time="52 * 60 * 1000"
				class="inline-block"
				@finish="isCountDownFinish = true"
			></m-count-down>
		</p>
	</div>
</template>

<script setup>
import { ref } from 'vue'
// 倒计时是否结束
const isCountDownFinish = ref(false)
</script>
